<template>
  <a-drawer
    :title="standard_id ? '详情' : '新增收费标准'"
    :width="1020"
    :visible="visible"
    :body-style="{ paddingBottom: '80px' }"
    @close="onClose"
  >
    <a-form
      :model="standardForm"
      ref="formRef"
      :rules="rules"
      layout="vertical"
    >
      <div class="form_title">收费设置</div>
      <div class="form_con">
        <a-form-item label="绑定对象" name="bind_object" class="form_itemes" >
          <a-radio-group
            @change="standardForm.unit = null"
            style="width: 100%"
            :disabled="isDetail"
            v-model:value="standardForm.bind_object"
          >
            <a-radio-button style="width: 50%" :value="1">
              <div
                style="
                  width: 100%;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                "
              >
                <span>房间</span>
                <CheckOutlined
                  style="color: #18f; margin-left: 30px"
                  v-if="standardForm.bind_object == 1"
                />
              </div>
            </a-radio-button>
            <a-radio-button style="width: 50%" :value="2">
              <div
                style="
                  width: 100%;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                "
              >
                <span>车位</span>
                <CheckOutlined
                  style="color: #18f; margin-left: 30px"
                  v-if="standardForm.bind_object == 2"
                />
              </div>
            </a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="项目名称" name="village_id" class="form_itemes">
          <a-select
            @change="(value) => handleSelectChange(value, 'village_id')"
            :disabled="isDetail"
            placeholder="请选择项目名称"
            v-model:value="standardForm.village_id"
          >
            <a-select-option
              v-for="(item, index) in villageList"
              :value="item.id"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item label="收费模式" name="cash_type" class="form_itemes">
          <a-select
              @change="(value) => handleSelectChange(value, 'cash_type')"
              placeholder="请选择"
              v-model:value="standardForm.cash_type" >
            <a-select-option :value="1">周期性费用</a-select-option>
            <a-select-option :value="2">一次性费用</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="费用类型" name="fee_type" class="form_itemes">
          <a-cascader
            :disabled="isDetail"
            v-model:value="standardForm.fee_type"
            :options="costTypeList"
            placeholder="请选择费用类型"
            :load-data="getCostTypeSub"
          />
        </a-form-item>
      </div>
      <div class="form_title">基本信息</div>
      <div class="form_con">
        <a-form-item label="标准名称" name="name" class="form_item">
          <a-input
            :disabled="isDetail"
            v-model:value="standardForm.name"
            placeholder="请输入"
          />
        </a-form-item>
        <a-form-item label="计费模式" name="mode" class="form_item">
          <a-select
            @change="(value) => handleSelectChange(value, 'mode')"
            :disabled="isDetail"
            placeholder="请选择"
            v-model:value="standardForm.mode"
          >
            <a-select-option :value="1">单价</a-select-option>
            <a-select-option :value="2">单价*计量单位</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="单价" name="unit_price" class="form_item">
          <a-input
            :disabled="isDetail"
            style="width: 60%"
            v-model:value="standardForm.unit_price"
            placeholder="请输入"
          />
          <a-form-item-rest>
            <a-select
              :disabled="isDetail"
              style="width: 40%"
              placeholder="请选择"
              @change="(value) => handleSelectChange(value, 'unit_charging')"
              v-model:value="standardForm.unit_charging"
            >
              <template v-if="standardForm.cash_type == 2 && standardForm.mode == 1">
                <a-select-option
                  v-for="(key, value) in unitOnceRelation['1']"
                  :key="value"
                  :value="value"
                  >{{ key }}</a-select-option >
              </template>
              <template v-if="standardForm.cash_type == 2 && standardForm.mode == 2">
                <a-select-option
                    v-for="(key, value) in unitOnceRelation['2']"
                    :key="value"
                    :value="value"
                >{{ key }}</a-select-option >
              </template>
              <template v-if="standardForm.cash_type == 1 && standardForm.mode == 1">
                <a-select-option
                    v-for="(key, value) in unitYuanRelation['1']"
                    :key="value"
                    :value="value"
                >{{ key }}</a-select-option >
              </template>
              <template v-if="standardForm.cash_type == 1 && standardForm.mode == 2">
                <a-select-option
                    v-for="(key, value) in unitYuanRelation['2']"
                    :key="value"
                    :value="value"
                >{{ key }}</a-select-option >
              </template>
            </a-select>
          </a-form-item-rest>
        </a-form-item>
        <a-form-item label="标准生效时间" name="validTime" class="form_item">
          <!-- show-time -->
          <a-date-picker
            :disabled="isDetail"
            @change="(value) => handleDateChange(value, 'valid_time')"
            style="width: 100%"
            v-model:value="standardForm.validTime"
          />
        </a-form-item>
        <a-form-item name="expireTime" class="form_item">
          <template #label>
            <div style="margin-right: 10px">标准失效日期</div>
            <a-checkbox
              :disabled="isDetail"
              style="margin-left: 10px"
              v-model:checked="is_default"
              @change="onCheckAllChange"
            >
              永久生效
            </a-checkbox>
            <a-tooltip
              placement="topLeft"
              title="若设置了截止日期，该收费标准会在第二天凌晨状态变更为关闭状态（不能使用）若设置截止时间为2023-07-29那在2023-07-30 凌晨自动关闭收费标准"
            >
              <QuestionCircleOutlined />
            </a-tooltip>
          </template>
          <a-form-item-rest>
            <a-date-picker
              :disabled="is_default || isDetail"
              @change="(value) => handleDateChange(value, 'expire_time')"
              style="width: 100%"
              v-model:value="standardForm.expireTime"
            />
          </a-form-item-rest>
        </a-form-item>
        <a-form-item
          label="计量单位"
          name="unit"
          class="form_item"
          v-if="standardForm.mode == 2"
        >
          <a-select
            :disabled="isDetail"
            placeholder="请选择"
            v-model:value="standardForm.unit"
          >
            <template v-if="standardForm.bind_object == 1">
              <a-select-option
                v-for="(value, key) in unitList[1]"
                :key="key"
                :value="key"
                >{{ value }}</a-select-option
              >
            </template>
            <template v-if="standardForm.bind_object == 2">
              <a-select-option
                v-for="(value, key) in unitList[2]"
                :key="key"
                :value="key"
                >{{ value }}</a-select-option
              >
            </template>
          </a-select>
        </a-form-item>
        <div v-if="standardForm.mode == 1" class="form_item"></div>
        <a-form-item v-if="!(standardForm.cash_type == 2 )" name="pay_date_days" class="form_item">
          <template #label>
            <div style="display: flex; flex-wrap: nowrap; width: 288px">
              <div style="width: 40.3%; flex-shrink: 0">
                <span style="margin-right: 10px">付款时间</span>
                <a-tooltip placement="topLeft">
                  <template #title>
                    付款时间计算规则(含当天)。<br />
                    1、按开始延后 （表示是按照账单的开始时间进行延后
                    N个自然日或工作日）<br />
                    2、按结束延后 （表示是按照账单的结束时间进行延后
                    N个自然日或工作日）<br />
                    3、提前 （表示是按照账单的开始时间进行提前
                    N个自然日或工作日）<br />
                    4、指定日期
                    （表示是按照账单的开始时间进行从本月起或者不计算本月进行延后）<br />
                  </template>
                  <QuestionCircleOutlined />
                </a-tooltip>
              </div>
              <div style="width: 26.3%; flex-shrink: 0">
                <span></span>
              </div>
              <div style="width: 33.3%; flex-shrink: 0">
                <span>日期计算方式</span>
              </div>
            </div>
          </template>
          <div style="width: 100%; display: flex; align-items: center">
            <div style="width: 40.3%">
              <a-form-item-rest>
                <a-select
                  :disabled="isDetail"
                  placeholder="请选择"
                  v-model:value="standardForm.pay_date_action"
                  @change="
                    (value) => handleSelectChange(value, 'pay_date_action')
                  "
                >
                  <a-select-option
                    v-for="(key, value) in payActionDayArr"
                    :key="value"
                    :value="value"
                    >{{ key }}</a-select-option
                  >
                </a-select>
              </a-form-item-rest>
            </div>
            <a-input-number
              :disabled="isDetail"
              :min="1"
              :max="366"
              style="width: 26.3%"
              placeholder="请输入"
              v-model:value="standardForm.pay_date_days"
            />

            <a-form-item-rest>
              <a-select
                :disabled="isDetail"
                v-if="standardForm.pay_date_action != 'specify_date'"
                style="width: 33.3%"
                placeholder="请选择"
                v-model:value="standardForm.pay_date_action_type"
              >
                <a-select-option
                  v-for="(key, value) in payDateSelect['delay']"
                  :key="value"
                  :value="value"
                  >{{ key }}</a-select-option
                >
              </a-select>
              <a-select
                v-else
                style="width: 33.3%"
                placeholder="请选择"
                v-model:value="standardForm.pay_date_action_type"
              >
                <a-select-option
                  v-for="(key, value) in payDateSelect['specify_date']"
                  :key="value"
                  :value="value"
                  >{{ key }}</a-select-option
                >
              </a-select>
            </a-form-item-rest>
          </div>
        </a-form-item>
        <a-form-item v-if="!(standardForm.cash_type == 2 )" name="daily_unit_price_and_month_rule" class="form_item">
          <template #label>
            <div style="margin-right: 10px">计费(和拆分)规则</div>
            <a-tooltip placement="topLeft">
              <template #title>
                选项一【按自然月天数计算】根据本月的实际天数来计算收取的费用。<br />
                说明 :按本月的实际天数来计算费用金额。
                根据每月的实际天数计算费用。若收费足月的情况下，两者没有区别；不足月的情况下，计算每一天的费用则不同。比如：只有10天(*平方米)的收费，则10天(*平方米)的费用金额=本月总金额/本月实际天数*10(*平方米)。<br />
                <br />
                选项二【按30天/月计算】始终安装每月30天来计算收取的费用。
              </template>
              <QuestionCircleOutlined />
            </a-tooltip>
          </template>
          <a-select
            :disabled="isDetail"
            placeholder="请选择计费规则"
            v-model:value="standardForm.daily_unit_price_and_month_rule"
            v-if="refrashSelect"
          >
            <a-select-option value="30_day">按30天计费</a-select-option>
            <a-select-option value="month_day"
              >按自然月{{
                standardForm.unit_charging == "yuan_per_day" ||
                standardForm.unit_charging == "yuan_square_meter_times_per_day"
                  ? "天数"
                  : ""
              }}计费</a-select-option
            >
          </a-select>
        </a-form-item>

        <a-form-item v-if="!(standardForm.cash_type == 2 )" name="pay_cycle" class="form_item">
          <template #label>
            <div style="margin-right: 10px">
              账单拆分周期（<span style="color: red; font-weight: bolder">{{
                standardForm.pay_cycle ? standardForm.pay_cycle : "1"
              }}</span
              >月一笔）
            </div>
            <a-tooltip placement="topLeft">
              <template #title>
                <span
                  v-if="
                    standardForm.daily_unit_price_and_month_rule == 'month_day'
                  "
                >
                  例：一年的欠费账单（2023-01-01至2023-12-30），按5月一笔拆分，可拆分成3笔账单：<br />
                  第一笔的账单时间2023-01-01至2023-05-31（5个月的账单），<br />
                  第二笔的账单时间2023-06-01至2023-10-31（5个月的账单），<br />
                  第三笔的账单时间2023-11-01至2023-12-31（2个月的账单）。<br />
                </span>
                <span v-else>
                  例：一年的欠费账单（2023-01-01至2023-12-30），按5月一笔拆分，可拆分成3笔账单：<br />
                  第一笔的账单时间2023-01-01至2023-05-30（5个月的账单），<br />
                  第二笔的账单时间2023-05-31至2023-10-28（5个月的账单），<br />
                  第三笔的账单时间2023-10-29至2023-12-31（2个月+4天的账单）。<br />
                </span>
              </template>
              <QuestionCircleOutlined />
            </a-tooltip>
          </template>
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: flex-start;
            "
          >
            <div
              style="
                width: 10%;
                height: 33px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #eee;
              "
            >
              <FieldTimeOutlined />
            </div>
            <a-input-number
              :disabled="isDetail"
              :min="1"
              :max="360"
              style="width: 70%"
              v-model:value="standardForm.pay_cycle"
              placeholder="请输入"
            />
            <div
              style="
                width: 20%;
                height: 33px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #eee;
              "
            >
              {{
                standardForm.daily_unit_price_and_month_rule == "month_day"
                  ? "自然月"
                  : "30天/月"
              }}
            </div>
          </div>
        </a-form-item>

        <a-form-item
          label="划分方式"
          name="divide_method"
          class="form_item"
          v-if="standardForm.daily_unit_price_and_month_rule == 'month_day'"
        >
          <a-select
            :disabled="isDetail"
            placeholder="请选择划分方式"
            v-model:value="standardForm.divide_method"
          >
            <a-select-option
              v-for="(key, value) in monthDivideMethodArr"
              :key="value"
              :value="value"
              >{{ key }}</a-select-option
            >
          </a-select>
        </a-form-item>
      </div>
      <div class="form_title">
        违约金设置
        <a-tooltip
          placement="topLeft"
          title="违约金系数：系数值根据自己的实际情况而定，违约金=系数*实收金额*天数"
        >
          <QuestionCircleOutlined style="margin-left: 10px" />
        </a-tooltip>
      </div>
      <div class="form_con">
        <a-form-item name="after_days_start_bill" class="form_item">
          <template #label>
            <div style="margin-right: 10px">起算天数</div>
            <a-tooltip
              placement="topLeft"
              title="账单生成后 多少天开始计算滞纳金"
            >
              <QuestionCircleOutlined />
            </a-tooltip>
          </template>
          <a-input-number
            style="width: 100%"
            :min="0"
            :disabled="isDetail"
            v-model:value="standardForm.after_days_start_bill"
            placeholder="请输入"
          />
        </a-form-item>
        <a-form-item name="every_day_pre" class="form_item">
          <template #label>
            <div style="margin-right: 10px">违约金收取比例（每天）</div>
            <a-tooltip
              placement="topLeft"
              title="百分比0-100，例如输入2，则每日按应收费用的2%比例收取滞纳金，即100元应收费用，每天滞纳金为2元"
            >
              <QuestionCircleOutlined />
            </a-tooltip>
          </template>
          <a-input-number
            style="width: 100%"
            :min="0"
            :disabled="isDetail"
            v-model:value="standardForm.every_day_pre"
            placeholder="请输入"
          />
        </a-form-item>
        <a-form-item name="upper_limit_fee" class="form_item">
          <template #label>
            <div style="margin-right: 10px">违约金收取上限</div>
            <a-tooltip
              placement="topLeft"
              title="不填为不限制，一直计算到用户缴纳费用"
            >
              <QuestionCircleOutlined />
            </a-tooltip>
          </template>
          <a-input-number
            style="width: 100%"
            :min="0"
            :disabled="isDetail"
            v-model:value="standardForm.upper_limit_fee"
            placeholder="请输入"
          />
        </a-form-item>
      </div>
    </a-form>
    <div
      v-if="!isDetail"
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1,
      }"
    >
      <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
      <a-button type="primary" @click="handleSubmit">确定</a-button>
    </div>
  </a-drawer>
</template>

<script>
import request from "../../../../common/utils/request";
import { message } from "ant-design-vue";
import {
  PlusOutlined,
  CheckOutlined,
  QuestionCircleOutlined,
  FieldTimeOutlined,
} from "@ant-design/icons-vue";
import { defineComponent, reactive, ref, watch, toRefs } from "vue";
import moment from "moment";
import store from "@/store";
export default defineComponent({
  emits: ["close"],
  components: {
    CheckOutlined,
    QuestionCircleOutlined,
    FieldTimeOutlined,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    standard_id: {
      type: [String, Number],
      default: "",
    },
  },
  setup(props, context) {
    const formRef = ref();
    const state = reactive({
      is_default: false,
      isDetail: false,
      costTypeList: [],
      refrashSelect: true,
      affectDivideMethod: {},
      dailyRuleSelect: {},
      monthDivideMethodArr: {},
      payActionDayArr: {},
      payDateSelect: {},
      unitYuanRelation: {},
      unitOnceRelation: {},
      villageList: [],
      standardForm: {
        divide_method: null,
        bind_object: 1,
        village_id: null,
        pay_cycle: null,
        name: "",
        cash_type:1,
        mode: 1,
        unit_price: "",
        valid_time: "",
        expire_time: "",
        after_days_start_bill: "",
        every_day_pre: "",
        upper_limit_fee: "",
        validTime: null,
        expireTime: null,
        unit: null,
        fee_type: [],
        unit_charging: "yuan_per_day",
        pay_date_action: "delay",
        pay_date_days: null,
        pay_date_action_type: "natural_day",
        daily_unit_price_and_month_rule: "30_day",
      },
      rules: {
        fee_type: [
          {
            required: true,
            message: "请输入",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入",
          },
        ],
        mode: [
          {
            required: false,
            message: "请选择",
          },
        ],
        unit_price: [
          {
            required: true,
            message: "请输入",
          },
        ],
        validTime: [
          {
            required: true,
            message: "请输入",
          },
        ],
        expireTime: [
          {
            required: true,
            message: "请输入",
          },
        ],
        after_days_start_bill: [
          {
            required: false,
            message: "请输入",
          },
        ],
        every_day_pre: [
          {
            required: false,
            message: "请输入",
          },
        ],
        upper_limit_fee: [
          {
            required: false,
            message: "请输入",
          },
        ],
        unit: [
          {
            required: true,
            message: "请选择",
          },
        ],
        pay_date_days: [
          {
            required: true,
            message: "请输入",
          },
        ],
        daily_unit_price_and_month_rule: [
          {
            required: true,
            message: "请选择",
          },
        ],
        pay_cycle: [
          {
            required: true,
            message: "请输入",
          },
        ],
        bind_object: [
          {
            required: true,
            message: "请选择",
          },
        ],
        village_id: [
          {
            required: true,
            message: "请选择",
          },
        ],
        cash_type: [
          {
            required: true,
            message: "请选择",
          },
        ],
        divide_method: [
          {
            required: true,
            message: "请选择",
          },
        ],
      },
      unitList: [],
    });

    const clearForm = () => {
      state.standardForm = {
        divide_method: null,
        bind_object: 1,
        village_id: null,
        pay_cycle: null,
        name: "",
        cash_type:1,
        mode: 1,
        unit_price: "",
        valid_time: "",
        expire_time: "",
        after_days_start_bill: "",
        every_day_pre: "",
        upper_limit_fee: "",
        unit: null,
        fee_type: [],
        unit_charging: "yuan_per_day",
        pay_date_action: "delay",
        pay_date_days: null,
        pay_date_action_type: "natural_day",
        daily_unit_price_and_month_rule: "30_day",
      };
      state.standardForm.expireTime = null;
      state.standardForm.validTime = null;
      state.is_default = false;
      state.isDetail = false;
    };

    const onClose = () => {
      context.emit("close");
      clearForm();
      formRef.value.resetFields();
    };

    const handleSelectChange = (value, type) => {
      if (type == "mode") {
        state.standardForm.unit = null;
        if (state.standardForm.cash_type == 1) {
          if (value == 1){
            let list = state.unitYuanRelation['1']
            state.standardForm["unit_charging"]= Object.keys(list)[0];
          }else {
            let list = state.unitYuanRelation['2']
            state.standardForm["unit_charging"] = Object.keys(list)[0];
          }
        } else {
          if (value == 1){
            let list = state.unitOnceRelation['1']
            state.standardForm["unit_charging"] = Object.keys(list)[0];
          }else {
            let list = state.unitOnceRelation['2']
            state.standardForm["unit_charging"] = Object.keys(list)[0];
          }
        }
      }
      if (type == "village_id") {
        let index = state.villageList.findIndex((v) => v.id == value);
        if (index != -1) {
          state.standardForm["village_name"] = state.villageList[index].name;
        }
      }
      if (type == "pay_date_action") {
        if (value == "specify_date") {
          state.standardForm["pay_date_action_type"] = "from_month";
        } else {
          state.standardForm["pay_date_action_type"] = "natural_day";
        }
      }
      if (type == "cash_type") {
        if(value == 1){
          if (state.standardForm.mode == 1){
            let list = state.unitYuanRelation['1']
            state.standardForm.unit_charging = Object.keys(list)[0];
          }else {
            let list = state.unitYuanRelation['2']
            state.standardForm.unit_charging = Object.keys(list)[0];
          }
        }
        if(value == 2){
          if (state.standardForm.mode == 1){
            let list = state.unitOnceRelation['1']
            state.standardForm.unit_charging = Object.keys(list)[0];
          }else {
            let list = state.unitOnceRelation['2']
            state.standardForm.unit_charging = Object.keys(list)[0];
          }
          state.standardForm.daily_unit_price_and_month_rule = '30_day'
          state.standardForm.pay_cycle = 1
          state.standardForm.pay_date_action = 'delay'
          state.standardForm.pay_date_action_type = 'natural_day'
          state.standardForm.pay_date_days = 1
        }
      }
    };

    const getCostCategory = () => {
      request.get("/org", "/bill/cost/categoryList", {}).then((res) => {
        if (res.list) {
          state.costTypeList = res.list.map((item) => ({
            label: item.name,
            value: item.id,
            isLeaf: false,
          }));
        }
        if (props.standard_id) {
          getDetail(props.standard_id);
        }
      });
    };

    const getCostTypeSub = (selectedOptions) => {
      const targetOption = selectedOptions[selectedOptions.length - 1];
      targetOption.loading = true;
      request
        .get("/org", "/bill/costList", {
          page: 1,
          limit: 9999,
          category_id: targetOption.value,
          status: 1,
        })
        .then((res) => {
          if (res.list) {
            targetOption.loading = false;
            targetOption.children = res.list.map((item) => ({
              id: item.id,
              label: item.name,
              value: item.cost_type,
              isLeaf: true,
            }));
            state.costTypeList = [...state.costTypeList];
          }
        });
    };

    const handleSubmit = () => {
      formRef.value.validate().then(() => {
        let params = {};
        Object.assign(params, state.standardForm);
        if (params["fee_type"][1]) {
          let index = state.costTypeList.findIndex(
            (v) => v.value == state.standardForm["fee_type"][0]
          );
          if (index != -1) {
            state.costTypeList[index].children.map((item) => {
              if (item.value == state.standardForm["fee_type"][1]) {
                params.bill_cost_type_id = item.id;
                params.bill_cost_type = {};
                params.bill_cost_type["name"] = item.label;
                params.bill_cost_type["cost_type"] = item.value;
                params.bill_cost_type["bigName"] =
                  state.costTypeList[index].label;
                params.bill_cost_type["fee_type"] = params["fee_type"];
                Reflect.deleteProperty(params, "fee_type");
              }
            });
          }
        }
        for (let item in params) {
          if (!params[item]) {
            Reflect.deleteProperty(params, item);
            Reflect.deleteProperty(params, "expireTime");
            Reflect.deleteProperty(params, "validTime");
          }
        }
        params.valid_time =
          moment(params.valid_time).format("YYYY-MM-DD") + " 00:00:00";
        params.expire_time =
          moment(params.expire_time).format("YYYY-MM-DD") + " 23:59:59";
        if (!props.standard_id) {
          request.post("/org", "/standard/add", params).then((res) => {
            message.success("添加成功！");
            clearForm();
            formRef.value.resetFields();
            context.emit("close", true);
          });
        } else {
          params.standard_id = props.standard_id;
          request.post("/org", "/standard/update", params).then((res) => {
            message.success("更新成功！");
            clearForm();
            formRef.value.resetFields();
            context.emit("close", true);
          });
        }
      });
    };

    const getUnitList = () => {
      state.unitList = [];
      request.get("/org", "/standard/unit/list").then((res) => {
        state.unitList = res.result;
      });
    };

    const handleDateChange = (value, type) => {
      state.standardForm[type] = moment(value);
    };

    const getDetail = (id) => {
      request.get("/org", "/standard/detail", { id }).then((res) => {
        state.standardForm = res.result;
        state.standardForm.unit = state.standardForm.unit
          ? state.standardForm.unit
          : null;
        if (res.result.valid_time) {
          state.standardForm.validTime = moment(res.result.valid_time);
        }
        if (res.result.expire_time) {
          state.standardForm.expireTime = moment(res.result.expire_time);
        }
        if (res.result.bill_cost_type["fee_type"]) {
          state.standardForm["fee_type"] =
            res.result.bill_cost_type["fee_type"];
          let options = state.costTypeList.find(
            (v) => v.value == res.result.bill_cost_type["fee_type"][0]
          );
          getCostTypeSub([options]);
        }
      });
    };

    const onCheckAllChange = (val) => {
      if (val.target.checked) {
        state.standardForm.expireTime = moment("2099-12-12");
        state.standardForm.expire_time = "2099-12-12";
      } else {
        state.standardForm.expireTime = null;
        state.standardForm.expire_time = "";
      }
    };

    const getCascaderList = () => {
      request.get("/org", "/standard/charge/cascader").then((res) => {
        state.affectDivideMethod = res.affectDivideMethod;
        state.dailyRuleSelect = res.dailyRuleSelect;
        state.monthDivideMethodArr = res.monthDivideMethodArr;
        state.payActionDayArr = res.payActionDayArr;
        state.payDateSelect = res.payDateSelect;
        state.unitYuanRelation = res.unitYuanRelation;
        state.unitOnceRelation = res.unitOnceRelation;
      });
    };

    const getVillageList = () => {
      request.get("/org", "/standard/charge/bind/village/list").then((res) => {
        state.villageList = res.result;
      });
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          getUnitList();
          getCostCategory();
          getCascaderList();
          getVillageList();
        }
        if (val && props.standard_id) {
          state.isDetail = true;
        }
      }
    );

    return {
      onClose,
      handleSubmit,
      formRef,
      handleSelectChange,
      getUnitList,
      handleDateChange,
      getDetail,
      onCheckAllChange,
      getCostTypeSub,
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
.form_con {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  .form_item {
    display: flex;
    width: 30%;
    margin-right: 20px;
  }
  .form_itemes {
    display: flex;
    width: 22.5%;
    margin-right: 20px;
  }
}
.form_title {
  width: 100%;
  padding: 15px 0;
  border-bottom: 1px dashed #d7d7d7;
  font-size: 15px;
  color: #333;
  margin-bottom: 15px;
  font-weight: bolder;
}
</style>
